<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="740" height="411" destroy-on-close
			   @closed="$emit('closed')">
		<el-header>
			<div class="left-panel">
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input v-model="search.department_code" placeholder="科室编码" clearable style="min-width:15%;"></el-input>
					<el-input v-model="search.department_name" placeholder="科室名称" clearable style="min-width:15%;"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="info" @click="resetsearch">重置</el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" :pageSize="10" stripe remoteSort @dataChange="tableChange" :params="search"
					 remoteFilter>
				<el-table-column label="ID" prop="id" width="50"></el-table-column>
				<el-table-column label="科室编号" prop="department_code" width="150"></el-table-column>
				<el-table-column label="科室名称" prop="department_name" width="150"></el-table-column>
				<el-table-column label="修改时间" prop="updated_at" width="150"></el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="80">
					<template #default="scope">
						<el-button-group>
							<el-button text type="danger" size="small" v-if="scope.row.is_added"
									   @click="addMed('cancel', scope.row, scope.$index)">取消选择
							</el-button>
							<el-button text type="primary" size="small" v-else
									   @click="addMed('add',scope.row, scope.$index)">选择
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">确 认</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '科室',
			},
			visible: false,
			isSaveing: false,
			apiObj: this.$API['admin.doctor'].departmentList,
			//表单搜索
			search: {},
			selected: [],
		}
	},
	mounted() {
	},
	methods: {
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			this.selected = [];
			return this
		},
		//表单注入数据
		setData() {
		},
		addMed(type, row) {
			if (type === 'add') {
				row.is_added = true;
				this.selected.push(row);
			} else {
				row.is_added = false;
				this.selected = this.selected.filter(item => item.department_code !== row.department_code);
			}
		},
		tableChange() {
			this.$refs.table.tableData.forEach(item => {
				this.selected.forEach(val => {
					if (item.department_code == val.department_code) {
						item.is_added = true;
					}
				});
			});
		},
		submit() {
			let selected = this.selected;
			if (selected.length == 0) {
				this.$alert('还没有选择科室', "提示", {type: 'error'})
				return;
			}
			this.visible = false;
			this.$emit('success', selected);
		},
		//关闭
		close() {
			this.visible = false;
			return this
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//重置
		resetsearch() {
			this.search = {
				department_code:'',
				department_name:''
			}
		},
	}
};
</script>

<style>

</style>
